<template>
    <div class="Group-container">
        <Like @click="onLike"
            :active-color="likeColor"
            :size="size"
            v-model="likeVal" />

        <Hate @click="onHate"
            :active-color="hateColor"
            :size="size"
            v-model="hateVal" />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Like from './Like.vue'
import Hate from './Hate.vue'
import { computed } from 'vue'
import { LikeVal } from './type'


defineOptions({
    inheritAttrs: true,
    name: 'Group'
})
const props = withDefaults(
    defineProps<{
        modelValue: LikeVal
        gap?: number
        /** 是否选完 */
        done?: boolean
        likeColor?: string
        hateColor?: string
        size?: number
    }>(),
    {
        gap: 5,
        done: false
    }
)
const emit = defineEmits<{
    (e: 'update:modelValue', data: LikeVal): void
}>()


const
    likeVal = ref(false),
    hateVal = ref(false),
    wasChoose = computed(() => likeVal.value || hateVal.value),
    disabled = computed(() => wasChoose.value && props.done)


/** ------------------------------------------------------------
 * 初始化
 */
init()
function init() {
    if (props.modelValue === null) {
        return
    }

    switch (props.modelValue) {
        case 'like':
            likeVal.value = true
            break
        case 'hate':
            hateVal.value = true
            break
    }
}

/** ------------------------------------------------------------
 * 事件
 */
function onLike() {
    if (disabled.value) return

    likeVal.value = true
    hateVal.value = false
    emit('update:modelValue', 'like')
}
function onHate() {
    if (disabled.value) return

    hateVal.value = true
    likeVal.value = false
    emit('update:modelValue', 'hate')
}


</script>

<style lang="scss" scoped>
.Group-container {
    display: flex;
    gap: calc(v-bind(gap) * 1px)
}
</style>
